import React, { PureComponent } from 'react'
import { StatusBar } from 'react-native'
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation'

import HomeScene from './scene/Home/HomeScene'
import MineScene from './scene/Mine/MineScene'

import color from './widget/color'
import TabBarItem from './widget/TabBarItem'



const lightContentScenes = ['Home', 'Mine']
function getCurrentRouteName(navigationState) {
    if (!navigationState) {
        return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
        return getCurrentRouteName(route);
    }
    return route.routeName;
}
export default class RootScene extends PureComponent {
    constructor() {
        super()
        StatusBar.setBarStyle('light-content')
    }

    render() {
        return (
            // <Navigator
            //     onNavigationStateChange={
            //         (prevState, currentState) => {
            //             const currentScene = getCurrentRouteName(currentState);
            //             const previousScene = getCurrentRouteName(prevState);
            //             if (previousScene !== currentScene) {
            //                 if (lightContentScenes.indexOf(currentScene) >= 0) {
            //                     StatusBar.setBarStyle('light-content')
            //                 } else {
            //                     StatusBar.setBarStyle('dark-content')
            //                 }
            //             }
            //         }
            //     }
            // />
            <Tab/>
        )
    }
}

const Tab = TabNavigator(
    {
        Home: {
            screen: HomeScene,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '首页',
                tabBarIcon: ({ focused, tintColor }) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./img/pic/tab1.png')}
                        selectedImage={require('./img/pic/tab1_choosed.png')}
                    />
                )
            }),
        },
        Nearby: {
            screen: MineScene,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '我的',
                tabBarIcon: ({ focused, tintColor }) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./img/pic/tab2.png')}
                        selectedImage={require('./img/pic/tab2_choosed.png')}
                    />
                )
            }),
        },
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        animationEnabled: true,
        lazy: true,
        tabBarOptions: {
            activeTintColor: color.theme,
            inactiveTintColor: '#979797',
            showIcon: true,
            style: { backgroundColor: '#ffffff' },
            indicatorStyle: {
                height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
            },
        },
    }

);

const Navigator = StackNavigator(
    {
        Tab: { screen: Tab },
        Web: { screen: WebScene },
        GroupPurchase: { screen: GroupPurchaseScene },
    },
    {
        navigationOptions: {
            // headerStyle: { backgroundColor: color.theme }
            headerBackTitle: null,
            headerTintColor: '#333333',
            showIcon: true,
        },
    }
);